<template>
    <view class="header">
        <!-- 输入框 -->
        <image src="../../static/icon/search-icon.png" mode="" />
        <input type="text" disabled @click="goSearch" :placeholder="$t('documentary.input')">
        <view @click="goToList" class="documentary-list">{{ $t('documentary.list') }}</view>
    </view>
    <view class="banner">
        <view class="blue-block"></view>
        <view class="total">{{ $t('documentary.total') }}</view>
        <view class="table" ref="table" id="table"></view>
    </view>
    <view class="main">
        <view class="blue-block"></view>
        <view class="detail">{{ $t('documentary.detail') }}</view>
        <view class="table">
            <!-- v-for -->
            <view :class="['item', index == userDocument.length - 1 ? 'mb-0' : '']" v-for="(item, index) in userDocument"
                @click="showDetail(item.scale, item.minInvest, item.state, item.id)" :key="index">
                <view class="item-child item-user">
                    <view class="key">{{ $t('documentary.documentary-user') }}</view>
                    <view class="value">{{ item.sponsorName }}</view>
                </view>
                <view class="item-child item-fund">
                    <view class="key">{{ $t('documentary.documentary-fund') }}</view>
                    <view class="value">{{ item.scale }}</view>
                </view>
                <view class="item-child item-profit">
                    <view class="key">{{ $t('documentary.documentary-profit') }}</view>
                    <view class="value">{{ `${item.minProfitRate} - ${item.maxProfitRate}` }}</view>
                </view>
                <view :class="['item-end', item.state == 2 ? 'text-grey' : 'text-blue',]">
                    <view class="item-state">{{ $t(`documentary.documentary-${item.state == 2 ? 'end' : item.state == 1 ?
                        'ing' : 'sub'}`) }}</view>
                    <view class="date">{{ item.data }}</view>
                    <!-- <view class="date-end">{{ `${item.second}${$t('documentary.documentary-over')}` }}</view> -->
                </view>
            </view>
        </view>
    </view>

    <!-- taost -->
    <Transition>
        <view class="toast" v-show="isShow">
            <view class="out">
                <!-- 遮罩层 -->
                <view class="mask" @click="closeShow"></view>
                <!-- container -->
                <view class="container">
                    <view class="scale">
                        <view class="key">{{ $t('documentary.documentary-fund') }}</view>
                        <view class="value">{{ scale }}</view>
                    </view>
                    <view class="minInvest">
                        <view class="key">{{ $t('documentary.documentary-minInvest') }}</view>
                        <view class="value">{{ minInvest }}</view>
                    </view>
                    <view class="input" v-if="inputIsShow">
                        <view class="key">{{ $t('documentary.history-input') }}</view>
                        <input type="text" class="text" v-model="option.buyMoney">
                    </view>
                    <view class="btn" @click="addUserDocument" v-if="inputIsShow">
                        {{ $t('submit') }}
                    </view>
                </view>
            </view>
        </view>
    </Transition>
    <Transition>
        <view class="tips" v-show="isFailue">
            {{ $t(`documentary.documentary-${msg}`) }}
        </view>
    </Transition>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { requestApi } from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';

import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';


// 去输入框
function goSearch() {
    uni.navigateTo({
        url: '/pages/search/search'
    })
}


const scale = ref(null)
const minInvest = ref(null)
const documentId = ref(null)
const isShow = ref(false)// 弹窗isShow 默认faLse
const inputIsShow = ref(false)
function showDetail(x, y, state, id) {
    scale.value = x //资金规模
    minInvest.value = y //最低投资
    isShow.value = true
    if (state == 1) {
        inputIsShow.value = true
        documentId.value = id
    } else {
        inputIsShow.value = false
    }
}
function closeShow() {
    scale.value = null //资金规模
    minInvest.value = null //最低投资
    isShow.value = false
}


// 用户跟单
const option = reactive({
    documentId: '',
    buyMoney: ''
})
const isFailue = ref(false)
const msg = ref('failue')
async function addUserDocument() {
    // 符合条件
    if (option.buyMoney >= minInvest.value) {
        option.documentId = documentId.value
        const { status } = await requestApi.addUserDocument(option)
        if (status == 0) {
            closeShow()
            setTimeout(() => {
                isFailue.value = false
                msg.value = 'failue'
            }, 1500)
            msg.value = 'success'
            isFailue.value = true
        }
    } else { // 不符合条件
        closeShow()
        setTimeout(() => {
            isFailue.value = false
        }, 1500)
        isFailue.value = true
    }
}

// 去跟单记录
function goToList() {
    return uni.navigateTo({
        url: '/pages/documentary-list/documentary-list'
    })
}

/*
    endTime: 1677170237000
    id: 1
    inputMoney: null
    lockTime: null
    maxProfitRate: 0.5
    minInvest: 20
    minProfitRate: 0.2
    realProfitRate: null
    scale: 20000
    sponsorId: 1
    sponsorName: "gsg"
    startTime: 1675874233000
    userId: 53
*/
const userDocument = ref([]) // 获取发布的跟单列表
async function getDocumentList() {
    const { status, data } = await requestApi.getDocumentList()
    if (status == 0) {
        userDocument.value = data.map(item => {
            let { endTime, startTime } = item
            let state = 0 // 0：跟进 1：进行中 2：已结束
            let nowTime = new Date()

            let end = new Date(endTime)
            let start = new Date(startTime)

            nowTime = nowTime.getTime()
            if (nowTime >= end.getTime()) {
                item.state = 2
            } else if (nowTime < end.getTime() && nowTime >= start.getTime()) {
                item.state = 1
            } else {
                item.state = 0
            }
            // 处理时间 
            // endTime = formateDate(new Date(endTime))
            item.data = endTime
            // item.second = endTime.slice(10, 16)
            return item
        })
    }
}
async function zdStock() {
    const { status, data } = await requestApi.zdStock()
    const zdStocks = []
    for (let i = 0; i < data.length; i++) {
        const item = {}
        item.value = data[i]
        if (i <= 3) {
            item.itemStyle = {
                color: '#F04848'
            }
        } else if (i == 4) {
            item.itemStyle = {
                color: '#666666'
            }
        } else {
            item.itemStyle = {
                color: '#26A69A'
            }
        }
        zdStocks.push(item)
    }
    return zdStocks
}
onShow(() => {
    getDocumentList()
})

echarts.use([GridComponent, BarChart, CanvasRenderer]);
const table = ref(null)
var options;
onMounted(async () => {
    const res = await zdStock()
    var chartDom = document.getElementById('table');
    var myChart = echarts.init(chartDom);
    options = {
        grid: {
            top: '15%',
            left: '15%',
            bottom: '20%'
        },
        xAxis: {
            type: 'category',
            data: [">7%", "7%~5%", "5%~3%", "3%~0%", "平盤", "0%~3%", "3%~5%", "5%~7%", ">7%"]
        },
        yAxis: {
            type: 'value',
        },

        series: [
            {
                data: res,
                type: 'bar',
                barWidth: 20,
                barGap: '50%',
            }
        ]
    };
    options && myChart.setOption(options);
})
</script>

<style lang="scss">
page {
    background-color: #191A22;
}

.header {
    width: 750rpx;
    // #ifndef H5
    padding-top: 88rpx;
    // #endif
    padding-left: 40rpx;
    padding-right: 46rpx;
    background-color: #191A22;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    display: flex;
    align-items: center;
    z-index: 99;

    image {
        width: 28rpx;
        height: 28rpx;
        position: fixed;
        left: 58rpx;
    }

    input {
        width: 558rpx;
        height: 64rpx;
        margin-top: 12rpx;
        margin-bottom: 12rpx;
        background-color: #20212A;
        padding-left: 58rpx;
        border-radius: 110rpx;
    }

    .documentary-list {
        color: #5A7EFF;
        font-size: 20rpx;
        white-space: nowrap;
        margin-left: 26rpx;
    }
}

.banner {
    // #ifndef H5
    margin-top: 196rpx;
    // #endif
    margin-top: 108rpx;
    background-color: #20212A;
    width: 672rpx;
    height: 414rpx;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40rpx;
    position: relative;

    .blue-block {
        width: 10rpx;
        height: 30rpx;
        border-radius: 5rpx;
        background-color: #176ced;
        position: absolute;
        left: 15rpx;
        top: 26rpx;
    }

    .total {
        color: #fff;
        font-size: 28rpx;
        width: 112rpx;
        line-height: 30rpx;
        margin-left: 36rpx;
        padding-top: 26rpx;
    }

    #table {
        height: 386rpx;
    }
}

.main {
    width: 672rpx;
    border-radius: 40rpx;
    margin: 40rpx auto 0rpx;
    background-color: #20212A;
    position: relative;

    .blue-block {
        width: 10rpx;
        height: 30rpx;
        border-radius: 5rpx;
        background-color: #176ced;
        position: absolute;
        left: 45rpx;
        top: 38rpx;
    }

    .detail {
        color: #fff;
        padding-top: 32rpx;
        margin-left: 66rpx;
    }

    .table {
        margin-top: 30rpx;
        padding-bottom: 83rpx;

        .item {
            // background-color: red;
            margin: 0 auto 83rpx;
            width: 585rpx;
            height: 70rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-child {
                .key {
                    color: #7E8394;
                    font-size: 20rpx;
                }

                .value {
                    color: #fff;
                    font-size: 24rpx;
                }
            }

            .item-end {
                .item-state {
                    font-size: 24rpx;
                }

                .date,
                .date-end {
                    font-size: 12rpx;
                }
            }

            .text-grey {
                color: #7E8394;
            }

            .text-blue {
                color: #5A7EFF;
            }
        }
    }
}

.mb-0 {
    margin-bottom: 0 !important;
}

.toast {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    z-index: 999;
    width: 100%;
    height: 100%;

    .mask {
        background-color: rgba(0, 0, 0, .4);
        width: 100%;
        height: 100%;
    }

    .out {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .container {
        width: 525rpx;
        // height: 525rpx;
        background-color: #292A36;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30rpx 0;

        .scale,
        .minInvest,
        .input {
            display: flex;
            margin-bottom: 70rpx;
            width: 85%;
            justify-content: space-between;
            align-items: center;

            .key {
                color: #7E8394;
                white-space: nowrap;
            }

            .value {
                color: #fff;
            }

            .text {
                background-color: #191A22;
                width: 283rpx;
                height: 55rpx;
                border-radius: 20rpx;
                color: #7E8394;
                padding-left: 20rpx;
            }
        }


        .btn {
            background-color: #176ced;
            width: 413rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            color: #fff;
            border-radius: 204rpx;
        }
    }
}

.tips {
    width: 525rpx;
    // height: 525rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(41, 42, 54, .5);
    border-radius: 40rpx;
    color: #fff;
    padding: 50rpx;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.25s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>